<template>
<!-- 原始的登录页面 -->
    <div class="container">
         <div class='head'>
             <div class='logo'>
             </div>
        <div @click='toLogin'  class='button' >我要招聘</div>
        <div @click='toLogin'  class='button'>我要找工作</div>
        <div @click='toLogin'  class='button'>登录 </div>
        <div @click='toRegister' class='button' >注册 </div>

    </div>
        <div class="box">
           
      <img src='../assets/img/bg.jpg'>
  
            
        </div>
    </div>
</template>
<script>
    export default {
        name:'login',
        data() {
            return {

            }
        },
        methods:{
            toLogin(){
                //  window.location.href = "/index"
                 this.$router.push("/login")
                
            },
            toRegister() {
                 this.$router.push("/register")
            }
        }
        
    }
</script>
<style lang="less" scoped>
    .container {
         background: linear-gradient(to bottom, rgba(158,178,210), rgba(76,108,154,1)); /* 标准的语法 */
        height: auto;

        .head{
           
         display:flex;
          width:100%;
        height:60px;
        flex-direction:row;
        justify-content:space-around;
       
        background:rgba(76,108,154,0.5);
        color:aliceblue;
           box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.5);
         
        .button{
            height:100%;
            line-height:60px;
            border-style:none;
              cursor: pointer;
        }
         .button:hover {
              color: rgb(64, 128, 255);
        text-decoration: underline;
      }
      .logo{
          width:100px;
          height:100%;
      }
     }

       img{
            width:100%;
            height:500px;
        }

        
           
    }
</style>
